import {useState} from 'react'
import styles from './update.module.css'
import { NavBar,Input,Button } from 'react-vant';
import {api} from '../../luyou/index'
import { useNavigate } from 'react-router-dom';
export default function Update() {
  const navigate = useNavigate()
//   console.log(JSON.parse(sessionStorage.getItem('user'))._id);
  
  let [newpass, setNewpass] = useState('')
  let [newpass2, setNewpass2] = useState('')
  let [flag,setflag] = useState(false)
  let [flag2,setflag2] = useState(false)
  let [flag3,setflag3] = useState(false)
  let update=async()=>{
    if(newpass==newpass2){
      let {data} = await api.post('/updatePassword2',{_id:JSON.parse(sessionStorage.getItem('user'))._id,password:newpass})
      console.log(data)
      if(data.code==200){
        navigate(-1)
      }
    }else{
      setflag3(true)
    }
  }
  return (
    <>
        <NavBar
            title="修改密码"
            leftText="返回"
            onClickLeft={() => navigate(-1)}
        />
        <h2>新密码</h2>
        <Input
          value={newpass}
          type='password'
          onChange={password => setNewpass(password)}
          placeholder='请输入密码'
          className={styles.inp}
        />
        <span className={flag?styles.xian:styles.xiao}>请输入密码</span>
        <h2>再次输入密码</h2>
        <Input
          value={newpass2}
          type='password'
          onChange={password => setNewpass2(password)}
          placeholder='请再次输入密码'
          className={styles.inp}
        />
        <span className={flag2?styles.xian:styles.xiao}>请再次输入密码</span><br />
        <span className={flag3?styles.xian:styles.xiao}>两次密码不一致</span>
        <div className={styles.box4}>
         <Button className={styles.btn} onClick={()=>update()}>保存</Button>
        </div>
    </>
  )
}
